<template>
  <div class="setPassword">
    <van-nav-bar title="设置密码" left-arrow @click-left="$router.back()" />
    <van-cell-group inset class="form">
      <van-field
        v-model="loginParams.mobile"
        center
        clearable
        placeholder="请输手机号"
      >
        <template #button>
          <van-button
            size="mini"
            :color="titleCheck ? 'gray' : '#f15a24'"
            type="primary"
            :disabled="titleCheck"
            @click="getsmsCode"
            >{{ title }}</van-button
          >
        </template>
      </van-field>
      <van-field v-model="loginParams.smsCode" placeholder="请输入验证码" />
      <van-field
        :type="sx ? 'text' : 'password'"
        :right-icon="sx ? 'eye-o' : 'closed-eye'"
        @click-right-icon="isShow"
        type="password"
        v-model="loginParams.user_pass"
        placeholder="请输入新密码"
      />
    </van-cell-group>
    <p class="red">为保障账号安全,建议您定期修改密码哦</p>
    <div class="btnbox">
      <button @click="pawdLogin" class="btn">完成</button>
    </div>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { getSmsCodeApi, setPasswordApi } from '@/http/api'
export default {
  setup(props) {
    const data = reactive({
      titleCheck: false,
      title: '获取验证码',
      sx: false,
      imgData: {},
      loginParams: {
        mobile: '',
        smsCode: '',
        user_pass: ''
      }
    })
    const getsmsCode = () => {
      console.log(data.loginParams.mobile)
      let obj = {
        mobile: data.loginParams.mobile,
        sms_type: 'editmobile'
      }
      getSmsCodeData(obj)
    }
    const getSmsCodeData = async (obj) => {
      const res = await getSmsCodeApi(obj)
      console.log(res)
    }

    const pawdLogin = async () => {
      let obj = {
        mobile: data.loginParams.mobile,
        sms_code: data.loginParams.smsCode,
        user_pass: data.loginParams.user_pass
      }
      console.log(obj)
      const res = await setPasswordApi(obj)
      console.log(res)
    }

    const isShow = () => {
      data.sx = !data.sx
    }

    return {
      ...toRefs(data),
      getsmsCode,
      getSmsCodeData,
      pawdLogin,
      isShow
    }
  }
}
</script>
<style lang="scss" scoped>
.red {
  color: red;
  padding: 0 60px;
  font-size: 12px;
}
.btnbox {
  margin-top: 80px;
  padding: 0 40px;
  box-sizing: border-box;
  .btn {
    width: 100%;
    font-size: 18px;
    line-height: 80px;
    color: #fff;
    border: 1px solid #f15a24;
    background-color: #f15a24;
    border-radius: 10px;
  }
}
</style>
